{{extend './layouts/layout.html'}}

{{block 'content'}}
<div class="container-fluid">
  <div class="page-title">
    <h1>分类目录</h1>
  </div>
  <!-- 有错误信息时展示 -->
  <!-- <div class="alert alert-danger">
    <strong>错误！</strong>发生XXX错误
  </div> -->
  <div class="row">
    <div class="col-md-4">
      <form id="form">
        <h2>添加新分类目录</h2>
        <div class="form-group">
          <label for="name">名称</label>
          <input id="name" class="form-control" name="cate_name" type="text" placeholder="分类名称">
        </div>
        <div class="form-group">
          <label for="slug">别名</label>
          <input id="slug" class="form-control" name="cate_slug" type="text" placeholder="slug">
          <p class="help-block">https://example.com/category/<strong>slug</strong></p>
        </div>
        <div class="form-group">
          <button id="submitBtn" class="btn btn-primary">添加</button>
        </div>
      </form>
    </div>
    <div class="col-md-8">
      <div class="page-action">
        <!-- show when multiple checked -->
        <a class="btn btn-danger btn-sm" href="javascript:;" style="display: none">批量删除</a>
      </div>
      <table class="table table-striped table-bordered table-hover">
        <thead>
          <tr>
            <th class="text-center" width="40"><input type="checkbox"></th>
            <th>名称</th>
            <th>Slug</th>
            <th class="text-center" width="100">操作</th>
          </tr>
        </thead>
        <tbody class="tbody">
        </tbody>
      </table>
    </div>
  </div>
</div>
<!-- 编辑模态框 -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">编辑</h4>
      </div>
      <div class="modal-body">
        <form id="modal_form">
          <div class="form-group">
            <label for="modal_cate_name" class="control-label">名称:</label>
            <input type="text" class="form-control" id="modal_cate_name" name="cate_name">
          </div>
          <div class="form-group">
            <label for="modal_cate_slug" class="control-label">Slug:</label>
            <input type="text" class="form-control" id="modal_cate_slug" name="cate_slug">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" name="submit">保存修改</button>
      </div>
    </div>
  </div>
</div>
{{/block}}

{{block 'script'}}
<script id="temp" type="text/html">
  {% each categories item %}
  <tr>
    <td class="text-center"><input type="checkbox"></td>
    <td>{% item.cate_name %}</td>
    <td>{% item.cate_slug %}</td>
    <td class="text-center">
      <a href="javascript:;" class="btn btn-info btn-xs" data-id="{% item.cate_id %}" name="edit">编辑</a>
      <a href="javascript:;" class="btn btn-danger btn-xs" data-id="{% item.cate_id %}" name="delete">删除</a>
    </td>
  </tr>
  {% /each %}
</script>
<script>
  loadData()
  // $('.tbody a[name=delete]').on('click', deleteHandler)
  $('.tbody').on('click', 'a[name=delete]', deleteHandler)
  $('#submitBtn').on('click', addHandler)
  $('.tbody').on('click', 'a[name=edit]', editShowHandler)
  $('.modal-footer').on('click', 'button[name=submit]', editHandler)

  /**
   * 方法区
  */
  // 获取分类目录
  function loadData() {
    $.ajax({
      url: '/api/categories',
      type: 'get',
      data: {},
      dataType: 'json',
      success: (res) => {
        console.log('loadDataRes---', res)
        // 根据模板id拿到模板字符串
        const htmlStr = template('temp', {
          categories: res.categoriesList
        })
        $('.tbody').html(htmlStr)
      },
      error: (err) => {
        console.log(err)
      }
    })
  }

  // 删除分类
  function deleteHandler(e) {
    console.log('e---', e)
    console.log('id---', e.target.dataset.id)
    e.preventDefault()
    if (window.confirm('确定要删除吗？')) {
      $.ajax({
        url: '/api/categories/delete',
        type: 'post',
        // data: {id: e.target.dataset.id},
        data: {id: $(this).data('id')}, // jq的data方法专门用于获取自定义的属性
        dataType: 'json',
        success: (res) => {
          console.log('deleteRes---', res)
          if (res.success) loadData()
        },
        error: (err) => {
          console.log(err)
        }
      })
    }
  }

  // 添加分类
  function addHandler() {
    // serialize会找到表单中带有 name 的元素，提取对应的值，拼接成 key=value$key=value的格式数据
    const formData = $('#form').serialize()
    console.log(formData) // cate_name=%E8%90%A8%E8%BE%BE&cate_slug=as
    $.ajax({
      url: '/api/categories/add',
      type: 'post',
      data: formData,
      dataType: 'json',
      success: (res) => {
        console.log('addRes---', res)
        if (res.success) {
          loadData()
          $('#form').find('input[name]').val('')
        }
      },
      error: (err) => {
        console.log(err)
      }
    })
    return false
  }

  // 定义变量存储编辑id
  let editId
  // 显示编辑模态框
  function editShowHandler() {
    $('#exampleModal').modal('show')
    editId = $(this).data('id')
    $.ajax({
      url: '/api/categories/editShow',
      type: 'post',
      data: {id: editId},
      dataType: 'json',
      success: (res) => {
        console.log('editShowRes---', res)
        if (res.success) {
          $('#modal_cate_name').val(res.data.cate_name)
          $('#modal_cate_slug').val(res.data.cate_slug)
        }
      },
      error: (err) => {
        console.log(err)
      }
    })
  }

  // 编辑分类
  function editHandler() {
    const formData = $('#modal_form').serialize()
    console.log('formData---', formData)
    $.ajax({
      url: '/api/categories/edit',
      type: 'post',
      data: String(formData) + `&cate_id=${editId}`,
      dataType: 'json',
      success: (res) => {
        console.log('editRes---', res)
        if (res.success) loadData()
        $('#exampleModal').modal('hide')
      },
      error: (err) => {
        console.log(err)
      }
    })
    return false
  }


</script>
{{/block}}